<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        li {
            list-style: none;
        }

        .tab-box {
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 200px;
            margin: 100px auto;
            border: 2px solid #ccc;
            border-top-color: #206f96;
        }

        .tab {
            display: flex;
        }

        .tab-item {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            height: 38px;
            margin-right: 2px;
            background-color: #206f96;
            color: #fff;
            cursor: pointer;
        }

        .tab-item:last-child {
            margin-right: 0px;
        }

        .current {
            background-color: #fff;
            color: #333;

        }

        .content {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .tab-content {
            position: absolute;
            width: 100%;
            height: 158px;
            line-height: 158px;
            display: none;
            /* display: block; */
        }

        .active {
            display: block;
        }
    </style>

</head>

<body>
    <div class="tab-box">
        <ul class="tab">
            <li class="tab-item current">标签一</li>
            <li class="tab-item">标签二</li>
            <li class="tab-item">标签三</li>
            <li class="tab-item">标签四</li>
        </ul>
        <ul class="content">
            <li class="tab-content active">第1页</li>
            <!-- <li class="tab-content" style="display: block;">第1页</li> -->
            <li class="tab-content">第2页</li>
            <li class="tab-content">第3页</li>
            <li class="tab-content">第4页</li>
        </ul>
    </div>


    <script>
        // 标签栏切换效果
        //     - 编写HTML，实现标签栏的结构与样式的设计，其中class等于current表示当前显示的标签，默认是第一个标签。
        //     - 获取所有的标签与标签对应的显示内容。
        //     - 遍历并为每个标签添加鼠标滑过事件，在事件的处理函数中，遍历标签对应的所有显示内容，当鼠标滑过标签时，通过classList的add()方法添加current，否则通过remove()方法移出current。


        //方法1
        // var tabLis = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
        // var conLis = document.getElementsByClassName('content')[0].children;

        // for (let i = 0; i < tabLis.length; i++) {

        //     tabLis[i].setAttribute('index', i);
        //     tabLis[i].addEventListener('click', function () {
        //         for (let i = 0; i < tabLis.length; i++) {
        //             tabLis[i].classList.remove('current');
        //         }
        //         this.classList.add('current');

        //         let index = this.getAttribute('index');
        //         console.log(index);
        //         for (let i = 0; i < conLis.length; i++) {
        //             conLis[i].style.display = 'none';
        //         }
        //         conLis[index].style.display = 'block';
        //     })

        // }


        // 自定义工具包对象
        var customTool = {};

        customTool.tabSwitch = function (tab, tabItem, content, tabContent, current, active) {
            // 获取所有标签元素
            var tab = document.querySelector(tab);
            var tabItem = tab.querySelectorAll(tabItem);
            // 获取所有内容元素
            var content = document.querySelector(content);
            var tabContent = content.querySelectorAll(tabContent);

            for (let i = 0; i < tabItem.length; i++) {
                // 给每一个标签绑定事件
                tabItem[i].onclick = function () {
                    // 将其他标签内的 active 类名 删除
                    // 将其他内容内的 active 类名 删除
                    for (let j = 0; j < tabItem.length; j++) {
                        if (tabItem[j].classList.contains(current) || tabContent[j].classList.contains(active)) {
                            tabItem[j].classList.remove(current);
                            tabContent[j].classList.remove(active);
                        }
                    }
                    // 给标签对应的内容添加 active 类名
                    // 给当前标签添加 active 类名
                    tabItem[i].classList.add(current);
                    tabContent[i].classList.add(active);
                }
            }
        }

        customTool.tabSwitch('.tab', '.tab-item', '.content', '.tab-content', 'current', 'active');
    </script>

</body>

</html>